<template>
  <div>
    <!-- 顶部 -->
    <div class="w">
      <img src="@/assets/img/logo.png" alt="" />
      <h3>联合登陆</h3>
      <p>
        进入网站首页 <i class="iconfont icon-angle-right"></i
        ><i class="iconfont icon-angle-right"></i>
      </p>
    </div>
    <section class="container">
      <nav class="tab">
        <a
          @click="hasAccount = true"
          :class="{ active: hasAccount }"
          href="javascript:;"
        >
          <i class="iconfont icon-bind" />
          <span>已有小兔鲜账号，请绑定手机</span>
        </a>
        <a
          @click="hasAccount = false"
          :class="{ active: !hasAccount }"
          href="javascript:;"
        >
          <i class="iconfont icon-edit" />
          <span>没有小兔鲜账号，请完善资料</span>
        </a>
      </nav>
      <div class="tab-content" v-if="hasAccount">
        <CallbackBind
          :nickname="nickname"
          @change="hasAccount = false"
          :avatar="avatar"
          :openId="openId"
        />
      </div>
      <div class="tab-content" v-else>
        <CallbackPatch />
      </div>
    </section>
  </div>
</template>

<script>
// 引入组件
import CallbackBind from "@/components/Login/CallbackBind.vue";
import CallbackPatch from "@/components/Login/CallbackPatch.vue";
// 引入qc
import QC from "qc";
// 引入api
import { qqLogin } from "@/utils/Api/Login";
export default {
  components: {
    CallbackBind,
    CallbackPatch,
  },
  data() {
    return {
      // 切换的变量
      hasAccount: true,
      // qq昵称
      nickname: "",
      // qq头像
      avatar: "",
      // 存储当前id
      openId: "",
    };
  },
  mounted() {
    this.checkQQ();
  },
  methods: {
    checkQQ() {
      // QC.Login.check() 检查你是否同意qq已经登录  true是登录 false是未登录
      if (QC.Login.check()) {
        // qq已经登录 需要检查账号是否已经被注册过
        QC.Login.getMe((openId) => {
          // 存储id
          this.openId = openId;
          // 去调用接口是检查openId是否在本网站已经被注册过
          qqLogin(openId)
            .then((res) => {
              console.log(res);
              this.$message({
                text: "登陆成功",
                type: "success",
              });
              // 将用户数据存储到vuex中
              this.$store.commit("User/setUserInfo", res.data.result);
              // 跳转首页
              this.$router.push("/home");
            })
            .catch(() => {
              // 第三方登录失败
              // 获取到当前用户信息展示在页面上
              QC.api("get_user_info").success((res) => {
                this.nickname = res.data.nickname;
                this.avatar = res.data.figureurl;
              });
            });
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 132px;
  // background-color: aqua;
  display: flex;
  align-items: center;
  margin: 0px 8px;
  position: relative;
  img {
    width: 200px;
  }
  h3 {
    width: 900px;
    flex: 1;
    font-size: 24px;
    font-weight: 400;
    margin-top: 38px;
    margin-left: 20px;
    color: #666;
  }
  p {
    position: absolute;
    right: 0;
    bottom: 30px;
    i {
      color: #27ba9b;
      &:first-child {
        margin-left: -5px;
      }
      &:last-child {
        margin-left: -5px;
      }
    }
  }
}
.container {
  padding: 25px 0;
}
.tab {
  background: #fff;
  height: 80px;
  padding-top: 40px;
  font-size: 18px;
  text-align: center;
  a {
    color: #666;
    display: inline-block;
    width: 350px;
    line-height: 40px;
    border-bottom: 2px solid #e4e4e4;
    i {
      font-size: 22px;
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
      margin-left: 4px;
    }
    &.active {
      color: #27bb9a;
      border-color: #27bb9a;
    }
  }
}
.tab-content {
  min-height: 600px;
  background: #fff;
}
</style>
